<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>21_多列布局-案例练习</title>
        <style>
            div {
                column-count: 4;
            }

            img {
                /* 在多列布局中  那么100%代表的是让这个图片充满这一列的宽 */
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./images-person/img07.jpg" alt="">
            <img src="./images-person/img08.jpg" alt="">
            <img src="./images-person/img09.jpg" alt="">
            <img src="./images-person/img10.jpg" alt="">
            <img src="./images-person/img11.jpg" alt="">
            <img src="./images-person/img12.jpg" alt="">
            <img src="./images-person/img13.jpg" alt="">
            <img src="./images-person/img14.jpg" alt="">
            <img src="./images-person/img15.jpg" alt="">
            <img src="./images-person/img16.jpg" alt="">
            <img src="./images-person/img17.jpg" alt="">
            <img src="./images-person/img18.jpg" alt="">
            <img src="./images-person/img19.jpg" alt="">
            <img src="./images-person/img20.jpg" alt="">
            <img src="./images-person/img21.jpg" alt="">
        </div>
    </body>
</html>